<template>
    <el-form
      size="medium"
      :label-width="labelWidth"
      :model="temporaryData"
      :isShow="isShow"
      :class="$style.basePageModal"
      ref="formdoalog"
      :rules="formdialog"
      :validate-on-rule-change="false"
      v-loading="loading"
    >
      <el-row :style="'padding:'+padding ">
        <el-col :span="item.width || 12" v-for="(item, index) of editColumn" :key="index" :class="index">
          <el-form-item :label="item.name" :hidden="item.hidden"  :prop="item.prop" class="owner">
            <template v-if="item.type==='text'">
              <el-input 
                :disabled="item.disabled" 
                :placeholder="'请输入'+item.name" 
                :maxlength="item.max?item.max:''"
                v-model="temporaryData[item.prop]">
                <template v-if="item.append" slot="append">{{item.appendText}}</template>
              </el-input>
              <!-- <el-popover
              v-if="item.desc"
            placement="bottom"
            title="标题"
            width="200"
            trigger="click"
            content="0 为不开启功能">
            <img src="@/assets/wenhao.png" style="width: 20px;height: 20px" slot="reference" alt=""/> 
            
          </el-popover> -->
          <!-- <span style="font-size: 12px;color:gray" v-if="item.desc" >* {{item.desc}}</span> -->
            </template>
            <template v-if="item.type==='password'">
              <el-input 
                type="password"
                :disabled="item.disabled" 
                :placeholder="'请输入'+item.name" 
                :maxlength="item.max?item.max:''"
                v-model="temporaryData[item.prop]">
                <template v-if="item.append" slot="append">{{item.appendText}}</template>
              </el-input>
            </template>
            <template v-else-if="item.type==='number'">
              <el-input
                type="number"
                :max="item.max!=undefined? item.max: ''"
                :min="item.min!=undefined? item.min: ''"
                :disabled="item.disabled"
                :placeholder="'请输入'+item.name"
                v-model="temporaryData[item.prop]"
              >
              <template v-if="item.append" slot="append">{{item.appendText}}</template>
              </el-input>
            </template>
            <template v-else-if="item.type==='time'">
              <el-date-picker
                :disabled="item.disabled" 
                v-model="temporaryData[item.prop]"
                type="date"
                value-format="timestamp"
                :placeholder="'请选择'+item.name"
              ></el-date-picker>
            </template>
            <template v-else-if="item.type==='year'">
              <el-date-picker
                :disabled="item.disabled" 
                v-model="temporaryData[item.prop]"
                type="year"
                :placeholder="'请选择'+item.name"
              ></el-date-picker>
            </template>
            <template v-else-if="item.type==='timepicker'">
              <el-time-picker
                is-range
                :disabled="item.disabled" 
                v-model="temporaryData[item.prop]"
                range-separator="至"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                value-format="timestamp"
                format="HH:mm"
                :placeholder="'请输入'+item.name">
              </el-time-picker>
            </template>
            <template v-else-if="item.type==='inputNumber'">
              <el-input-number
                :disabled="item.disabled" 
                v-model="temporaryData[item.prop]"
                :max='item.max&&item.max'
                @change="value => $attrs[item.prop]?$attrs[item.prop](value):{}"
                :min="1"
              ></el-input-number>
            </template>
            <template v-else-if="item.type==='textarea'">
              <el-input
                :disabled="item.disabled" 
                v-model="temporaryData[item.prop]"
                :placeholder="'请输入'+item.name"
                type="textarea"
              ></el-input>
            </template>

            <template v-else-if="item.type==='switch'">
              <el-switch
                :disabled="item.disabled"
                v-model="temporaryData[item.prop]"
                active-color="#13ce66"
                inactive-color="#979aa1"
                :active-text="item.activeText"
                :inactive-text="item.InActiveText">
              </el-switch>
            </template>


            <template v-else-if="item.type==='cascader'">
              <el-cascader
              v-model="temporaryData[item.prop]"
              :placeholder="'请选择'+item.name"
              :options="item.optionList"
              @change="value => $attrs[item.prop] ? $attrs[item.prop](value) : {}"
              filterable></el-cascader>
            </template>

            
            <template v-else-if="item.type==='radio'">
              <div>
                <el-radio-group 
                :disabled="item.disabled" 
                size="mini"
                @change="(val)=> item.onChange(val)"
                v-model="temporaryData[item.prop]">
                <el-radio
                style="margin: 4px 4px"
                border
                  v-for="(optionItem,index) of item.optionList"
                  :key="index+'ra' || index+'ra'"
                  :label="item.optionBindValue ? optionItem[item.optionBindValue] : optionItem.value"
                >{{item.optionBindLabel ? optionItem[item.optionBindLabel] : optionItem.name}}</el-radio>
              </el-radio-group>
              </div>
            </template>

            <template v-else-if="item.type==='select'">
              <el-select
                filterable
                :multiple="item.multiple"
                :disabled="item.disabled"
                v-model="temporaryData[item.prop]"
                @change="(val)=> item.onChange(val)"
                :placeholder="'请选择'+item.name"
              >
                <el-option
                  v-for="(optionItem,index) of item.optionList"
                  :key="index+'op' || index+'op'"
                  :label="item.optionBindLabel ? optionItem[item.optionBindLabel] : optionItem.name"
                  :value="item.optionBindValue ? optionItem[item.optionBindValue] : optionItem.value"
                ></el-option>
              </el-select>
            </template>
            <template v-else-if="item.type==='checkbox'">
              <el-checkbox-group :disabled="item.disabled"  v-model="temporaryData[item.prop]" @change="value => $attrs[item.prop] ? $attrs[item.prop](value) : {}">
                <el-checkbox
                  v-for="(optionItem, index) in item.optionList"
                  :label="item.optionBindValue ? optionItem[item.optionBindValue] : optionItem.value"
                  :key="index+'ch' || index+'ch'"
                  >{{item.optionBindLabel ? optionItem[item.optionBindLabel] : optionItem.name}}</el-checkbox>
                </el-checkbox-group>
            </template>
            <template v-else-if="item.type==='dateTime'">
              <el-date-picker
                :disabled="item.disabled" 
                v-model="temporaryData[item.prop]"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                placeholder="选择日期时间"
                align="right">
              </el-date-picker>
            </template>
            <template v-else-if="item.type==='other'" class="111">
                <slot :name="item.slotName" :data="temporaryData[item.prop]" :item="item" class="eeeee" />
            </template>
            <span style="font-size: 12px;color:gray" v-if="item.desc" >* {{item.desc}}</span>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" justify="center" v-if="!hiddenBtn">
        <el-col :span="4" justify='center'>
            <el-button type="primary" @click="onSubmit">提交</el-button>
        </el-col>
      </el-row>
    </el-form>

</template>
<script>
import ModalPanel from "@/components/ModalPanel";
import { arrayToObject } from "@/tools";
export default {
  components: {
    ModalPanel,
  },
  props: {
    loading:{
      type: Boolean,
      default: false
    },
    padding:{
      type: String,
      default: '0px'
    },
    isShow:{
      type: Boolean,
      default: false
    },
    hiddenBtn: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ""
    },
    editColumn: {
      type: Array,
      default: () => []
    },
    updateData: {
      type: Function,
      default: () => {}
    },
    temporaryData: {
        type: Object,
        default: () => ({})
    },
    labelWidth: {
        type: String,
        default: '80px'
    }
  },
  data() {
    return {
      isCreate: false,
    //   temporaryData: {},
      modalTitle: '',
      replenishData: {}
    };
  },
  computed: {
    formdialog() {
      let arr = this.editColumn
        .filter(item => item.required)
        .map(item => ({
          [item.prop]: {
            required: true,
            message: item.name + "不能为空",
            trigger: "blur"
          }
        }));
      return arrayToObject(arr, "prop");
    }
  },
  methods: {
    createRow(replenishData={}) {
      let getDefaultList = this.editColumn
        .filter(item => item.default)
        .map(item => ({ [item.prop]: item.default }));
      this.temporaryData = { ...arrayToObject(getDefaultList) };
      this.modalTitle = "新建" + this.title;
      this.isCreate = true;
      this.replenishData = replenishData
    },
    modifyRow(rowData, replenishData) {
      this.modalTitle = "编辑" + this.title;
      this.isCreate = false;
      this.replenishData = replenishData
      this.temporaryData = { ...rowData };
    },
    againValidate(str){
      this.$refs["formdoalog"].validateField(str)
    },
    async onSubmit() {
      this.$refs["formdoalog"].validate(async valid => {
        // console.log(this.temporaryData)
        if (valid) {
          this.updateData({...this.temporaryData, ...this.replenishData});
        } else {
          return false;
        }
      });
    }
  },
  mounted() {},
  created() {}
};
</script>
<style lang='scss' module>
.basePageModal {
  :global {
    .el-dialog__body {
      padding-bottom: 0;
    }
    .el-input-number--medium {
      width: 100%;
    }
    .el-input-group--append{
      width: 100%;
    }
  }
}
</style>

